/**
 * @author lulongwen
 * Date: 2023-08-27 17:58
 * Description:
 */

/**
 * @author lulongwen
 * Date: 2023-03-08 21:57
 * Description:
 */

// import React from 'react';
import ReactFlow, {
  // MiniMap,
  // Controls,
  Background,
  BackgroundVariant,
  Edge
} from 'reactflow';


import { Button } from '@/components/CustomNode';

// 自定义组件
const nodeTypes = {
  Button,
};

const initialNodes = [
  {
    id: '1',
    type: 'Button',
    data: { label: '自定义 Button组件' },
    position: { x: 0, y: 50 },
  },
];

const initialEdges: Edge<any>[] | undefined = [];

function NodeToolbarApp() {

  return (
    <ReactFlow
      defaultNodes={initialNodes}
      defaultEdges={initialEdges}
      minZoom={0.2}
      maxZoom={4}
      fitView
      nodeTypes={nodeTypes}
    >
      <Background variant={BackgroundVariant.Dots} />
    </ReactFlow>
  );
}

export default NodeToolbarApp;
